<template>
  <div>
    <el-row>
      <el-col>
        <el-form :inline="true" :model="formInline">
          <el-form-item>
            <el-input size="mini" v-model="formInline.receiveNum" placeholder="请输入领用编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.materialNum" placeholder="请输入耗材编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-input size="mini" v-model="formInline.materialName" placeholder="请输入耗材名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable size="mini" v-model="formInline.status" placeholder="请选择领用状态">
              <el-option label="已报废" value="1"></el-option>
              <el-option label="待审核" value="3" ></el-option>
              <el-option label="审核通过" value="4"></el-option>
              <el-option label="审核不通过" value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="buttonList">
      <el-col>
        <el-button :disabled="btnDisabled" type="primary" size="mini" @click="scrap()">登记处理结果</el-button>
        <!-- <el-button :disabled="btnDisabled" type="primary" size="mini" @click="edit('view')">查看</el-button>
        <el-button type="danger" size="mini">启/禁用</el-button> -->
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
          size="mini"
          style="width: 100%">
          <el-table-column
                  align="center"
                  type="selection"
                  width="55">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="RECEIVENUM"
            label="领用编号"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="MATERIALNUM"
            label="耗材编号"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="MATERIALNAME"
            label="耗材名称"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="MATERIALQUANTITY"
            label="当前库存"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="QUANTITY"
            label="报废数量"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="SCRAPUSERNAME"
            label="处理人"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="SCRAPUNITNAME"
            label="处理单位"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="SCRAPUNITPHONE"
            label="联系方式"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="REASON"
            label="报废原因"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="160px"
            prop="REMARKS"
            label="备注"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="CREATEUSERNAME"
            label="申请人"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            prop="CREATETIME"
            width="160px"
            label="申请时间"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{new Date(scope.row.CREATETIME).toLocaleString()}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="100px"
            prop="EXAMINEUSERNAME"
            label="审核人"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            align="center"
            prop="EXAMINETIME"
            width="160px"
            label="审核时间"
            :show-overflow-tooltip="true">
            <template slot-scope="scope" v-if="scope.row.EXAMINETIME" >
              {{new Date(scope.row.EXAMINETIME).toLocaleString()}}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="SCRAPSTATUS"
            label="状态"
            fixed="right"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.SCRAPSTATUS == 1 ? '已报废' 
              : scope.row.SCRAPSTATUS == 3 ? '待审核' 
              : scope.row.SCRAPSTATUS == 4 ? '审核通过' 
              : scope.row.SCRAPSTATUS == 5 ? '审核不通过' 
              : '错误状态'}}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes, prev, pager, next, jumper"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 20, 30, 50, 100]"
        >
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="登记处理结果" :visible.sync="receiveFormVisible" center width="25%">
      <el-form :model="receiveForm" ref="receiveForm" :rules="receiveFormRules" :label-width="formLabelWidth">
        <el-row>
          <el-col :span="18">
            <el-form-item label="处理方式" prop="type">
              <el-input size="mini" v-model="receiveForm.type" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="处理人" prop="scrapUserName">
              <el-input size="mini" v-model="receiveForm.scrapUserName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="外单位" prop="scrapUnitName">
              <el-input size="mini" v-model="receiveForm.scrapUnitName" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="联系方式" prop="scrapUnitPhone">
              <el-input size="mini" v-model="receiveForm.scrapUnitPhone" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="receiveFormVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitScrapForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "trainBase",
    data() {
      return{
        pagination: {
          pageSize: 10,
          total: 1,
          pageNo: 1
        },
        warnPagination: {
          pageSize: 500,
          total: 1,
          pageNo: 1
        },
        form: {
          id: '',
          purchaseTime: '',
          reason: '',
          remarks: '',
          materialPurchaseDetaileds: '',
        },
        receiveForm: {
          id: '',
          type: '',
          scrapUserName: '',
          scrapUnitName: '',
          scrapUnitPhone: ''
        },
        receiveFormRules: {
          type: [
            { required: true, message: '请输入输入处理方式', trigger: 'blur' },
          ],
          scrapUserName: [
            { required: true, message: '请输入处理人', trigger: 'blur' },
          ],
          scrapUnitName: [
            { required: true, message: '请输入处理外单位', trigger: 'blur' },
          ],
          scrapUnitPhone: [
            { required: true, message: '请输入外单位联系方式', trigger: 'blur' },
          ],
        },
        formLabelWidth: '120px',
        dialogFormVisible: false,
        formInline: {},
        tableData: [],
        warnTableData: [],
        userList: [],
        selectId: [],
        btnDisabled: true,
        isEdit: false,
        isWarnEdit: false,
        nptDisabled: false,
        examineDisabled: false,
        isReceiveEdit: false,
        receiveFormVisible: false
      }
    },
    created() {
      this.search();
    },
    methods: {
      search() {
        let form = {
          receiveNum: this.formInline.receiveNum,
          materialNum: this.formInline.materialNum,
          materialName: this.formInline.materialName,
          status: this.formInline.status,
          pageSize: this.pagination.pageSize,
          pageNo: 1
        }
        this.$post('/materialScrap/findMaterialScrap', form ).then(res => {
          this.tableData = res.data.data.dataList;
          this.pagination.total = res.data.data.total;
        })
      },
      scrap(){
        if(this.selectId[0].SCRAPSTATUS !== 4){
          this.$message.error('只能登记审核通过的申请');
          return ;
        }
        this.isReceiveEdit = true;
        this.receiveForm.id = this.selectId[0].ID;
        this.receiveFormVisible = true
      },
      handleSelectionChange(val) {
        this.selectId = val;
        if(val.length === 1) {
          this.btnDisabled = false;
        } else {
          this.btnDisabled = true;
        }
      },
      handleSizeChange(size) {
        this.pagination.pageSize = size;
        this.search();
      },
      handleCurrentChange(page) {
        this.pagination.pageNo = page;
        this.search();
      },
      submitForm(status) {
        let form = {
          id: this.selectId[0].ID,
          purchaseStatus: status
        }
        this.$post('/materialPurchase/examine', form).then(res => {
          if(res.data.status === 1){
            this.$message.success('保存成功');
            this.search();
            this.dialogFormVisible = false;
            this.isEdit = false;
          } else{
            this.$message.error(res.data.msg)
          }
        });
      },
      submitScrapForm(){
        this.$refs['receiveForm'].validate((valid) => {
          if (valid) {
            this.$post('/materialScrap/check', this.receiveForm).then(res => {
              if(res.data.status === 1){
                this.$message.success('登记成功');
                this.search();
                this.isReceiveEdit = false;
                this.receiveFormVisible = false;
              } else{
                this.$message.error(res.data.msg)
              } 
            });
          } else {
            return false;
          }
        });

      },
    }
  }
</script>

<style scoped lang="scss">
  .dateStyle{
    /deep/.el-input__inner {
      padding-left: 30px !important;
    }
  }
  /deep/.el-form-item__error {
    top: 32px;
  }
</style>
